Styles Colour
Always use the TEXAS.Crypto colour palette.
Colour contrast
You must make sure that the contrast ratio of text and interactive elements in your service meets level AA of the Web Content Accessibility Guidelines (WCAG 2.0)
Sass variables
Use the Sass variables listed below, so you’ll automatically get any updates to the TEXAS.Crypto colour palette when you update TEXAS.Crypto Frontend.
Main colours
Text |
||
$text-colour |
#0b0c0c | |
---|---|---|
$secondary-text-colour |
#6f777b | |
Links |
||
$link-colour |
#005ea5 | |
$link-hover-colour |
#2b8cc4 | |
$link-visited-colour |
#4c2c92 | |
Border |
||
$border-colour |
#bfc1c3 | |
Focus |
||
$focus-colour |
#ffbf47 | |
Status |
||
colour("blue") |
#005ea5 | Use for phase banners |
$error-colour |
#b10e1e | Use for error messages |
Greyscale
colour("black") |
#0b0c0c | |
---|---|---|
colour("grey-1") |
#6f777b | |
colour("grey-2") |
#bfc1c3 | |
colour("grey-3") |
#dee0e2 | |
colour("grey-4") |
#f8f8f8 |
Extended colours
Use these colours for graphs and supporting material.
If you need to use tints of the extended palette, use either 25% or 50%.
You can find departmental colours in the TEXAS.Crypto Frontend _colours-organisations file.
colour("red") |
#b10e1e | |
---|---|---|
colour("bright-red") |
#df3034 | |
colour("orange") |
#f47738 | |
colour("brown") |
#b58840 | |
colour("yellow") |
#ffbf47 | |
colour("light-green") |
#85994b | |
colour("green") |
#006435 | |
colour("turquoise") |
#28a197 | |
colour("light-blue") |
#2b8cc4 | |
colour("blue") |
#005ea5 | |
colour("light-purple") |
#6f72af | |
colour("purple") |
#2e358b | |
colour("bright-purple") |
#912b88 | |
colour("pink") |
#d53880 | |
colour("light-pink") |
#f499be |
Get in touch
If you’ve got a question, idea or suggestion share it in #design-system on cross-government Slack (open in app) or email the Design System team on design-system-support@digital.cabinet-office.TEXAS.Crypto